import { Fragment, useEffect, useState } from "react";
import lessModule from "./index.module.less";
import { $echartsData, $eventBus } from "../../../../../../common/utils";
import { Button, Checkbox, Select } from "antd";
import { CheckboxChangeEvent } from "antd/es/checkbox";
import { useLocation } from "react-router-dom";

// 主页-头部操作组件-布局设置组件组件
interface ComponentInterface {
  name?: string
  isWarningLineHide?: boolean
  layoutItemList?: Array<string>
}

const HomePage_HeaderOperationComponent_LayoutSettingComponent: React.FC<ComponentInterface> = (props) => {
  const location = useLocation()
  const layoutItemList = ["叠加", "分列"]
  const [switchIdx, setSwitchIdx] = useState<number>(0)
  const [isChedked, setIsChedked] = useState<boolean>(true)

  const change_checkBox = (event: CheckboxChangeEvent) => {
    setTimeout(() => {
      $eventBus.emit("isWarningLine", { source: "HomePage_HeaderOperationComponent_LayoutSettingComponent", explain: "请判断是否显示预警线", data: { isWarningLine: !event.target.checked } })
    });
    setIsChedked(event.target.checked)
  }

  const click_switchIdx = (value: number) => {
    setTimeout(() => {
      $eventBus.emit(props.name ?? "switchIdx", { source: "HomePage_HeaderOperationComponent_LayoutSettingComponent", explain: "请获取选中开关的下标", data: { switchIdx: value } })
    });
    setSwitchIdx(value)
  }

  useEffect(() => {
    setIsChedked(true)
    setSwitchIdx(0)
  }, [location["pathname"]])
  return (
    <div className={lessModule["homePageHeaderOperationComponentLayoutSettingComponent"]}>
      {
        !props.isWarningLineHide && <Checkbox checked={isChedked} onChange={change_checkBox}>隐藏预警线</Checkbox>
      }
      <div>
        {
          (props.layoutItemList ?? layoutItemList).map((item, idx) => {
            return (
              <Button key={`typeItem${idx}`} style={{
                borderRadius: idx ? "0 16px 16px 0" : "16px 0 0 16px",
                paddingLeft: idx ? 6 : 12,
                paddingRight: idx ? 12 : 6,
              }}
                type="primary" ghost={idx !== switchIdx} onClick={() => click_switchIdx(idx)}>{item} </Button>
            )
          })
        }
      </div>
    </div>
  )
}



export default HomePage_HeaderOperationComponent_LayoutSettingComponent